<template>
    <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import shimen from "@/assets/json/shimen.json";
import AntPathPolyline from "@/tools/AntPathPolyline.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

onMounted(() => {
    const map = L.map("map", {
        preferCanvas: true,
    }).setView([29.396728, 111.193433], 8);

    L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
        {
            minZoom: 8,
            maxZoom: 18,
            attribution: "",
        }
    ).addTo(map);

    const geoLayerGroup = L.layerGroup().addTo(map);

    L.geoJSON(shimen, {
        style: {
            weight: 3,
            opacity: 1,
            color: "#0080FF", //边界颜色
            fillOpacity: 0,
            fillColor: "#0080FF", //填充颜色 默认透明度为0.2
        },
    }).addTo(geoLayerGroup);

    const layerGroup = L.layerGroup().addTo(map);

    const car = new AntPathPolyline();

    car.drawPolyline(
        map,
        mapStore.polylineData,
        layerGroup,
        0,
        0
    );
});
</script>

<style scoped>
#map {
    height: 100%;
    width: 100%;
}
</style>
